
<template>
 <ul >
  <li v-for="item in 5">{{item}}</li>
 </ul>

  <table border="1px" >
    <tr>
      <th>编号</th>
      <th>种类</th>
      <th>价格</th>
      <th>库存</th>
      <th>操作</th>
    </tr>

    <tr v-for="(item,index) in productArr">
      <th>{{ index+1 }}</th>
      <th>{{item.title}}</th>
      <th>{{item.price}}</th>
      <th>{{item.num}}</th>
      <th><button @click="del(index)">删除</button></th>
    </tr>
  </table>
  <button @click="delall">全部删除</button>
</template>
<script setup>
import {ref} from "vue";


const productArr = ref([
  {title:'苹果',price:999,num:99},
  {title:'苹果',price:999,num:99},
  {title:'苹果',price:999,num:99},
  {title:'苹果',price:999,num:99},
  {title:'苹果',price:999,num:99}
]);

const del = (index)=>{
  if (confirm("是否要删除?"))
  productArr.value.splice(index,1);
}

const delall=()=>{
  productArr.value.splice(0,productArr.value.length)
}



</script>

<style scoped>

</style>